<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="位置信息" :isAppBtn="false"></HeadCustom>
		<view class="card-box">
			<view class="card-bd fboxCol Ycenter Xcenter">
				<DetailMap :pattern="pattern" :longitude="detail.longitude" :latitude="detail.latitude"
					:address="detail.workAddress" />
			</view>
			<view class="card-ft">
				<view class="fboxRow">
					<view class="fboxCol flex1">
						<view class="font38">{{detail.companyName}}</view>
						<view class="font30 mt16 lh44 color-6B707C">{{detail.workAddress}}</view>
					</view>
					<image v-if="isApp" class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/workplace/icon-address.png"
						@click="goApp('address')"></image>
					<image v-else class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/workplace/icon-address.png"
						@click="handleOpen"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import DetailMap from '../components/detail-map.vue';
	import {
		jobDetailForUser
	} from '@/api/recruit.js';
	import openMaps from '@/static/js/mapApp.js';
	export default {
		components: {
			DetailMap
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				detail: {},
				id: '',
				pattern: 'width: 750rpx;height: 1000rpx;',
				isApp: false,
				thisMap: null
			}
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id
				this.getInit()
			}
			try {
				var th_is = this;
				th_is.mapContext = uni.createMapContext('maps')
				const res = uni.getSystemInfoSync();
				this.pattern = 'width: 750rpx;height: ' + (res.windowHeight - 110 - 44 - getApp().globalData
					.statusBarHeight) + 'px;'
			} catch (e) {
				// error
			}

			if (options && options.isApp) {
				this.isApp = options.isApp == 1 ? true : false
			} else {
				const {
					bw_link
				} = getApp().getBWData(['bw_link'])
				this.isApp = bw_link.isApp == 1 ? true : false
			}
		},
		methods: {
			goApp(type) {
				const data = {
					type: 'address',
					latitude: this.detail.latitude,
					longitude: this.detail.longitude,
					workAddress: this.detail.workAddress
				}
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
			},
			getInit() {
				jobDetailForUser({
					id: this.id
				}).then(res => {
					this.detail = res.data
				})
			},
			// 选择地图
			handleOpen() {
				if (this.detail.workAddress && this.detail.workAddress != '') {
					this.thisMap = new openMaps({
						address: this.detail.workAddress,
						title: this.detail.companyName,
						lat: this.detail.latitude,
						lng: this.detail.longitude
					})
					let that = this
					uni.showActionSheet({
						itemList: ['高德地图', '百度地图'], //['高德地图', '百度地图'],// ['高德地图', '百度地图', '腾讯地图'],
						itemColor: '#ACB4C7',
						class: 'actionSheetMenu',
						success: function(res) {
							that.thisMap.open(res.tapIndex)
						},
						fail: function(res) {
							console.log(res.errMsg);
						}
					});
				} else {
					uni.showToast({
						title: '暂不知道该地点位置',
						icon: 'none',
						duration: 2000,
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: calc(100vh);
	}

	.card-bd {
		width: 750rpx;
	}

	.card-ft {
		padding: 50rpx 40rpx 54rpx;
	}

	.icon {
		width: 98rpx;
		height: 98rpx
	}
</style>